<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span><i class="el-icon-menu"></i>编码规则</span>
    </div>
    <div class="text item">
      <el-form :inline="true" class="demo-form-inline" label-width="100px" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="textSearch" @keyup.enter.native="ruleSearch" @clear="ruleSearch" clearable placeholder="请输入编码规则/名称"
            style="width:240px;">
            <el-button slot="append" icon="el-icon-search" @click="ruleSearch"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" @click='codeRuleAdd(addParams)' plain>
            新增
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="el-flex el-box-column">
        <el-table :data="tableData" border stripe style="width: 100%" height="100%">
          <el-table-column prop="ruleCode" label="规则编码" min-width="200px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ruleName" label="规则名称" min-width="200px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="decollator" align="center" label="分隔符" min-width="115px" sortable
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="enabled" align="center" label="启用状态" width="110px"  sortable >
            <template slot-scope='scope'>
              <el-switch v-model="scope.row.enabled" active-value="Y" inactive-value="N" @change="ruleStatusclick(scope.$index,scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70px" sortable align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="编辑" @click='handleTaskEdit(scope.$index, scope.row)'
                icon="el-icon-edit"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="size"
          :current-page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
  } from 'element-ui'
  import {
    codeList,
    ruleStatus,
  } from '@/api/system/codeRule/codeRule.js'
  export default {
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
    },
    data() {
      return {
        page: 1, //表格初始页数
        size: 20, //表格初始化条数
        dialogAgentSearchVisible: false,
        addParams: { //新增传递参数
          'title': '新增编码规则',
          'enabled': "Y",
        },
        tableData: [], //表格数据
        textSearch: '', //搜索值
        total: 0 ,//表格总条数
      }
    },
    created() {
      this.getTableData(this.page, this.size, this.textSearch)
      window.onresize = () => {
        this.$refs.tableData.doLayout() //监听窗口变化，重绘表格布局
      }
    },
    methods: {
      ruleSearch() { //查询
        this.getTableData(this.page, this.size, this.textSearch)
      },
      getTableData(page, size, textSearch) { //获取表格数据
        codeList({
          page: page,
          size: size,
          value: {
            textSearch: textSearch
          }
        }).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          }
        })
      },
      ruleStatusclick(index, row) { //表格启用状态
        ruleStatus({
          "enabled": row.enabled,
          "ruleId": row.ruleId
        }).then(res => {
          if (res.data.code == 10000) {
            this.getTableData(this.page, this.size)
            Message({
              type:'success',
              message:'操作成功'
            })
          }
        })
      },
      handleTaskEdit(index, row) { //编辑
        row.title = '编辑编码规则'
        this.jumpRouter(row)
      },
      codeRuleAdd(row) { //新增
        this.jumpRouter(row)
      },
      jumpRouter(row) { //动态路由跳转
        this.$router.addRoutes(this.multiRouters([{
          path: 'addCodeRule',
          name: 'addCodeRule', //自定义name名称
          component: () => import('@/views/system/codeRule/addCodeRule'),
          meta: {
            title: row.title
          }
        }]));
        this.$router.push(this.routerMatch({
          name: "addCodeRule", //顶部导航+侧边导航
          params: {
            row: row
          }
        }))
      },
      handleSizeChange(val) {//切换行数
        this.size = val
        this.getTableData(this.page, this.size)
      },
      handleCurrentChange(val) {//切换页面
        this.page = val
        this.getTableData(this.page, this.size)
      }
    },
  }
</script>
